<template>
  <div class="current_city">
    <span>当前城市：</span>
    <router-link :to="{name: path}">
      <span class="iconfont icon-positioning"></span>
      <span class="city">{{ cityName }}</span>
    </router-link>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'CurrentCity',
  data() {
    return {
      // 首页
      path: 'index',
    }
  },
  computed: {
     ...mapState(['cityName']),
  }
}
</script>

<style lang="scss" scoped>
// 这样写的好处是变量
@import '@/assets/style/mixins.scss';
@import '@/assets/style/variables.scss';
.current_city {
  @include flex-row;
  align-items: center;
  height: $headerHeight;
  padding-left: .1rem;
  font-size: .16rem;
  background-color: #fff;
  .iconfont {
    color: $defaultBgColor;
    margin-right: .05rem;
    vertical-align: 0.005rem;
  }
}
</style>